宣言型プログラミング Declarative programming

メリット

何が起きるかを記述

どのように起こるかは抽象化されてる

code:declarative.js

const string = "Restaurants in Hanalei";

const urlFriendly = string.replace(/ /g, "-");

console.log(urlFriendly);

code:declarative-react.js

const { render } = ReactDOM;

const Welcome = () => (

<h1>Hello World</h1>

</div>

);

render(<Welcome />, document.getElementById("target"))

以前

パッと見て何が起きるかわからない。

結果、コメントがいっぱい必要

code:imperative.js

const string = "Restaurants in Hanalei";

const urlFriendly = "";

for (var i = 0; i < string.length; i++) {

if (stringi === " ") {

urlFriendly += "-";

} else {

urlFriendly += stringi;

}

console.log(urlFriendly); // "Restaurants-in-Hanalei"

code:imperative-dom.js

const target = document.getElementById("target");

const wrapper = document.createElement("div");

const headline = document.createElement("h1");

wrapper.id = "welcome";

headline.innerText = "Hello World";

wrapper.appendChild(headline);

target.appendChild(wrapper);

参考